<template>
	<view style="padding-bottom: 5vh;">
		<!-- 头部搜索 -->
		<view style="width: 100%;" class="ascas">
			<view class="search-w">
				<view class="msggsou">
					<uni-search-bar radius="100" placeholder="请输入搜索内容" v-model="messageData.searchValue"
						clearButton="none" cancelButton="none" @confirm="search" />
				</view>
				<view @click="cleanupTips" style="margin-left: -60rpx;" class="delete">清空</view>
			</view>
		</view>
		<!-- 消息列表 -->
		<view class="content" v-for="(item, ids) in lists" :key="ids">
			<uni-swipe-action>
				<uni-swipe-action-item>
					<view class="messageList" @click="gotoPage(item)">
						<view class="messageTitle">
							<view>
								<image v-if="item.readed==0" src="http://106.14.56.171:15016/images/images/messige.png"
									mode=""></image>
								<image v-if="item.readed!=0"
									src="http://106.14.56.171:15016/images/epoxyPouringImages/messige.png" mode="">
								</image>
								<!-- 标题 -->
								<view class="titleOne">
									<text>{{item.noticeTitle}}</text>
								</view>

							</view>
							<!-- 时间 -->
							<text>{{ item.noticeTime?item.noticeTime.replace(/-/g, '/').replace('T',' ').slice(0,16):''}}</text>
						</view>
						<!-- 内容 -->
						<view class="messageContent">
							<text>{{ item.noticeContent || '暂无数据' }}</text>
						</view>
					</view>
					<template v-slot:right>
						<view class="slot-button" @click="deleteOneTip(item)"><text class="slot-button-text">删除</text>
						</view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<!-- 暂无消息… -->
		<view class="content blankMessage" v-if="lisTength==0">
			<view class="">
				<image src="http://106.14.56.171:15016/images/blank/blank.png" mode="" />
				<text>暂无消息…</text>
			</view>
		</view>

		<!-- 是否删除全部消息 -->
		<uni-popup ref="popupA" type="center">
			<view class="toggleAmed">
				<h3>是否删除全部消息</h3>
				<view class="ameedBtn">
					<view @click="cancel">取消</view>
					<view class="sure" @click="confirmDeletion">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 删除按钮单条数据 -->
		<uni-popup ref="popupB" type="center">
			<view class="toggleAmed">
				<h3>是否删除此消息</h3>
				<view class="ameedBtn">
					<view @click="cancele">取消</view>
					<view class="sure" @click="deleteOneTipst">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	export default {
		data() {
			return {
				// 消息列表的data
				lisTength: '', //消息数量
				messageData: {
					searchValue: '',
					pageNo: 1,
					pageSize: 10,
				},
				//获取消息列表lists
				lists: [],
				limitLoad: false, // 防止重复加载
				deleteOne: {}
			};
		},
		onReady() {
			// 模拟延迟赋值
			setTimeout(() => {
				this.isOpened = 'right';
			}, 1000);
		},
		onShow() {
			this.messageData.pageNo = 1;
			this.lists = this.lists.map(item => {
				item.leftStyle = 0
				return item;
			})
			this.fetchmessageList(); //获取消息列表
		},
		// 下拉刷新 （刷新完以后返回第一条数据）
		onPullDownRefresh() {
			this.messageData.pageNo = 1;
			this.fetchmessageList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		// 触底加载消息列表
		onReachBottom() {
			this.messageData.pageNo += 1;
			this.fetchmessageList(1); //触底加载消息列表
		},
		methods: {
			// 打开提示框
			cleanupTips() {
				if (this.lists.length == []) {
					uni.showToast({
						title: '没有消息可以删除',
						icon: 'none'
					});
					return;
				}
				this.$refs.popupA.open('center')
			},
			deleteOneTip(item) {
				this.deleteOne = item
				console.log('是否删除此消息', this.deleteOne);
				this.$refs.popupB.open('center')
			},
			// 关闭提示框
			cancel() {
				this.$refs.popupA.close('center')
			},
			cancele() {
				this.$refs.popupB.close('center')
			},

			// 失去焦点搜索消息列表里面的内容
			search: debounce(function(e) {
				let data = {
					searchValue: e.value, //搜索
					pageNo: 1,
					pageSize: 10
				};
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					mask: true
				})
				// console.log(data);
				this.$http.post('api/Message/GetMessageList', data).then(res => {
					// console.log('搜索',res);
					this.limitLoad = false
					uni.hideLoading()
					this.lists = res.items;
				}).catch(err => {
					uni.hideLoading()
					this.limitLoad = false
				})
			}, 300),
			// 获取消息列表
			fetchmessageList: debounce(function(a) {
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					title: '加载中···',
					mask: true
				})
				var data = {
					...this.messageData
				};
				// console.log('-----------陈征', data);
				this.$http.post('api/Message/GetMessageList', data).then(res => {
					console.log('获取消息列表', res.items.length);
					this.lisTength = res.items.length;
					this.limitLoad = false
					uni.hideLoading()
					if (a) {
						this.lists = [...this.lists, ...res.items];
						return;
					}
					this.lists = res.items;
				}).catch(err => {
					uni.hideLoading()
					this.limitLoad = false
				})
			}, 300),
			// 删除全部消息
			confirmDeletion() {
				this.$refs.popupA.close('center')
				this.$http.post('api/Message/DeleteMessageAll').then(res => {
					console.log('确定删除', res);
					if (res == null) {
						this.fetchmessageList();
					}
				});
			},
			// 删除单条消息
			deleteOneTipst() {
				// console.log('chen', this.deleteOne);
				let data = {
					messageIdList: [this.deleteOne.id]
				};

				this.$http.post('api/Message/DeleteMessage', data).then(res => {
					console.log('删除单条', res);
					if (res == null) {
						this.fetchmessageList();
					}
				});
				this.$refs.popupB.close('center')
			},
			// 点击进入消息页面 并传item 然后读取阅读
			gotoPage(item) {
				console.log('---征', item);
				let id = Number(item.id);
				let data = {
					messageIdList: [id]
				};
				console.log('-----------陈data', data);
				this.$http.post('api/Message/ReadMessage', data).then(res => {
					console.log('已读消息', res);
				});

				uni.navigateTo({
					// 需要转换 JSON：通常用于与服务端交换数据。在向服务器发送数据时一般是字符串。
					url: './message_detail?item=' + JSON.stringify(item)
				});
			},
		}
	};
</script>
<style>
	page {
		height: 100%;
		background-color: #FFFFFF;
	}
</style>
<style lang="less" scoped>
	// 头部搜索
	.ascas {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.user-insert-line {
		width: 80%;
		margin-top: 20rpx;
		margin-left: 14%;
		border-bottom: solid 1px #DFDFDF;
	}

	.search-w {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;

		.msggsou {
			width: 80%;
		}
	}

	// 是否删除全部消息弹窗
	.toggleAmed {
		width: 90%;
		height: 300rpx;
		background-color: #ffffff;
		margin: auto;
		border-radius: 30rpx;
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
	}

	.ameedBtn {
		width: 600rpx;
		display: flex;
		// background-color: aqua;
	}

	.ameedBtn>view {
		margin-left: 50rpx;
		width: 226rpx;
		height: 82rpx;
		line-height: 82rpx;
		border-radius: 123rpx;
		text-align: center;

	}

	.ameedBtn>view:nth-child(1) {
		background-color: #F5F5f5;
	}

	.sure {
		background-color: #9E001A;
		color: #ffffff;
	}

	.delete:hover {
		color: #9E001A;
	}

	// 右滑删除
	.content {
		width: 92%;
		margin: auto;
		// background-color: aquamarine;
	}

	.blankMessage {
		height: 80vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;

		>view {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 26rpx;

			>image {
				width: 300rpx;
				height: 300rpx;

			}

		}
	}


	.container {
		position: relative;
		margin-top: 26rpx;
		border-radius: 8rpx;
		// background-color: aqua;
	}

	.messageList {
		margin-top: 20rpx;
		margin: auto;
		width: 95%;
		// background-color: aqua;
	}

	// 照片和项目标题
	.messageTitle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background-color: aqua;
		line-height: 60rpx;
		padding: 20rpx 0 0 0;

		>view {
			width: 40%;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			// background-color: red;

			>image {
				position: relative;
				// top: 10rpx;
				width: 45rpx;
				height: 45rpx;
			}

			.titleOne {
				width: 200rpx;
				margin-left: 15rpx;
				// background-color: aqua;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		>text {
			font-size: 24rpx;
		}
	}

	// 内容
	.messageContent {
		padding: 20rpx 0 20rpx 0;
		font-size: 23rpx;
		overflow: hidden;
		-webkit-line-clamp: 3; //显示几行
		text-overflow: ellipsis; //超出部分显示省略号
		display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
		-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 纵向
		text-indent: 40rpx;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.delete-icon {
		position: absolute;
		top: 65%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		right: -197rpx;
		width: 130rpx;
		// height: 62rpx;
		line-height: 62rpx;
		border-radius: 31rpx;
		font-weight: 500;
		font-size: 32rpx;
		text-align: center;
		color: #FFFFFF;
		background: #b5001e;
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 60rpx;
		background-color: #b5001e;
	}

	/deep/ .uni-searchbar__box {
		border: 1px solid #EFEFEF;
	}
</style>
